
/*******************************************************************************
 * The code below this comment is integral part of the project "Jelliphy".
 * 
 * "Jelliphy" is a project created by: 
 * Dispage - Patrizio Gelosi
 * Via A. De Gasperi 91 
 * P. Potenza Picena (MC) - Italy
 * 
 * (Hereby referred to as "DISPAGE")
 * 
 * Copyright (c) 2011 DISPAGE.
 * 
 * @Released on: 02-06-2011
 * @Version: 1.0.00
 * @Build: 1109
 * @Site: http://www.dispage.com
 * @Contacts: http://www.dispage.com/contacts
 * 
 * The contents of this file are released under the GNU General Public License
 * version 3 as published by the Free Software Foundation that can be found at
 * the address "http://opensource.org/licenses/gpl-3.0.html". If the license
 * cannot be found, write to the Free Software Foundation, Inc., 51 Franklin
 * Street, Fifth Floor, Boston, MA 02110-1301 USA.
 * 
 * You may not use the present file except in compliance with the License.
 * Software distributed under the License is distributed on an "AS IS" basis,
 * WITHOUT WARRANTY OF ANY KIND, either express or implied.  See the License
 * for the specific language governing rights and limitations under the
 * License.
 * 
 * The interactive user interfaces in modified source and object code versions
 * of this program must display Appropriate Legal Notices, as required under
 * Section 5 of the GNU General Public License version 3.
 * 
 * In accordance with Section 7(b) of the GNU General Public License version 3,
 * these Appropriate Legal Notices must retain the display of the "Powered by
 * Dispage" logo. If the display of the logo is not reasonably feasible for
 * technical reasons, the Appropriate Legal Notices must display the words
 * "Powered by Dispage".
 * 
 ******************************************************************************/

var MGTut = new function () {

	var that = this,
		curStep,
		curStepInd,
		genInterval,
		reopen = false,

		seqInd,

		index = [
			'start',
			'main',
			'nav',
			'edit',
			[
				'propPanel',
				[
					'elemId',
					'contentSec',
					'advancedEdit',
					'propMain',
					'background',
					'colorPicker',
					'textFormatting',
					'addTextShadow',
					'textShadowPanel',
					'advancedProperties'
				],
				'jlphActions',
				[
					'quickEdit',
					'quickEdit2',
					'resizeElement',
					'moveElement',
					'moveElement2',
					'copyElement'
				],
				'domtree',
				'cssRules'
			],
			'add',
			[
				'add2',
				'add3'
			],
			'undoRedo',
			[
				'historyPanel'
			]
			,
			'transMgmt',
				[
				'save',
				'restore',
				'load',
				'export',
				'import',
				'embed',
				'publish'
				]
			,
			'finish'
		],

		seq = {
			start: {
				panel: '.mg-panel-main',
				offY: -35,
				blinkSel: ['JlQ(".mg-panel-main .JLui-resizable-handle")']
			},
			main: {
				panel: '.mg-panel-main',
				offY: -35
			},
			nav: {
				panel: '.mg-panel-main',
				edition: 'pro',
				blinkSel: ['JlQ("#mg-main-action .mg-button[mode=Nav]")'],
				forceMode: 'Nav'
			},
			edit: {
				panel: '.mg-panel-main',
				blinkSel: ['JlQ("#mg-main-action .mg-button[mode=Edit]")'],
				forceMode: 'Edit'
			},
			propPanel: {
				panel: '.mg-panel-properties',
				forceMode: 'Edit',
				offY: -45
			},
			elemId: {
				panel: '.mg-panel-properties',
				required: 'selected',
				offY: -25,
				blinkSel: ['JlQ("#mg-delete-elem")'],
				code: 'JlQ("#mg-tut-plc1").text(JlQ("#mg-current-element").text())'
			},
			jlphActions: {
				panel: '.mg-panel-main',
				required: 'selected',
				blinkSel: [['JlQ(".mg-mainmenu > li:eq(1) span, .mg-mainmenu a[item=delete]")', {suffix: '-yellow-rounded'}]]
			},
			contentSec: {
				panel: '.mg-panel-properties',
				required: 'text',
				blinkSel: ['JlQ("#mg-edit-elem")']
			},
			advancedEdit: {
				panel: '.mg-panel-editarea',
				blinkSel: [['JlQ("#save", JlQ("#frame_mg-editarea").contents().get(0))', {color: '#FFFF00', rEval : true}]],
				required: 'text',
				code: 'if (JlQ("#mg-edit-elem:visible").length) JlQ("#mg-edit-elem").click()'
			},
			quickEdit: {
				blinkSel: ['JlQ("#mg-quickedit-save")'],
				forceMode: 'Edit',
				code: 'if (JlQ(".mg-panel-editarea:visible").length) JlQ("#mg-editarea-cancel").click()'
			},
			quickEdit2: {
				blinkSel: [['JlQ("#mg-cursor-edit")', {suffix: '-quick-el', rEval : true}]],
				forceMode: 'Edit',
				code: 'if (JlQ("#mg-quickedit:visible").length) JlQ("#mg-quickedit .mg-generic-cancel").click()'
			},
			propMain: {
				panel: '.mg-panel-properties',
				forceMode: 'Edit',
				offY: 45,
				blinkSel: [
					'JlQ(".mg-panel-properties .mg-subpanel-group[mgorder=1] .mg-subpanel-head")',
					['JlQ("#mg-prop-container .JLui-icon-circle-triangle-s").first()', {suffix: '-yellow'}]
				],
				code: 'if (JlQ("#mg-quickedit:visible").length) JlQ("#mg-quickedit .mg-generic-cancel").click();MGTut.showSubpanel(1);'
			},
			background: {
				panel: '.mg-panel-properties',
				required: 'selected',
				offY: 85,
				blinkSel: [
					['JlQ("#mg-qp-opacity").parent().parent()', {suffix: '-quick-prop'}],
					['JlQ("#mg-qp-background-color").parent()', {suffix: '-yellow-rounded'}]
				],
				code: 'MGTut.showSubpanel(2);'
			},
			colorPicker: {
				panel: '.mg-panel-jpicker',
				required: 'selected',
				blinkSel: [
					['JlQ(".mg-panel-jpicker .Ok")', {color: '#ED82E6', rEval : true}]
				],
				code: 'if (MGD.elIsSelected && !JlQ(".mg-panel-jpicker:visible").length) {JlQ("#mg-qp-background-color").click()}'
			},
			textFormatting: {
				panel: '.mg-panel-properties',
				required: 'text',
				offY: -200,
				blinkSel: [['JlQ("#mg-prop-container .mg-subpanel-group[mgorder=1] .mg-elprop-standard-container > div > .mg-elprop-standard:first-child")', {suffix: '-quick-prop'}]],
				code: 'if (JlQ(".mg-panel-jpicker:visible").length) MGED.editColorCancel(true); MGTut.showSubpanel(1);'
			},
			addTextShadow: {
				panel: '.mg-panel-properties',
				required: 'text',
				offY: 85,
				blinkSel: [
					['JlQ("#mg-qp-text-shadow").parent()', {suffix: '-quick-prop'}],
					['JlQ("#mg-qp-text-shadow-more").parent()', {suffix: '-yellow'}]
				],
				code: 'if (JlQ(".mg-panel-jpicker:visible").length) MGED.editColorCancel(true); MGTut.showSubpanel(1);'
			},
			textShadowPanel: {
				panel: '.mg-panel-shadow',
				required: 'text',
				offY: 120,
				code: 'if (MGD.elIsSelected && !JlQ(".mg-panel-shadow:visible").length) {JlQ("#mg-qp-text-shadow-more").click()}'
			},
			advancedProperties: {
				panel: '.mg-panel-properties',
				offY: 85,
				blinkSel: [
					['JlQ(".mg-panel-properties .mg-subpanel-group[mgorder=1] .mg-switch-props")', {suffix: '-yellow-rounded'}]
				],
				forceMode: 'Edit',
				code: 'if (JlQ(".mg-panel-shadow:visible").length) MGED.cancelShadow(); MGTut.showSubpanel(1);'
			},
			resizeElement: {
				blinkSel: [['JlQ("#mg-cursor .JLui-resizable-handle")', {suffix: '-quick-el', rEval : true}]],
				forceMode: 'Edit'
			},
			moveElement: {
				forceMode: 'Edit'
			},
			moveElement2: {
				panel: '.mg-panel-properties',
				required: 'selected',
				offY: 85,
				width: 440,
				blinkSel: [
					'JlQ("#mg-qp-position").parent()'
				],
				code: 'if (JlQ(".mg-panel-shadow:visible").length) MGED.cancelShadow(); MGTut.showSubpanel(3);'
			},
			copyElement: {
				blinkSel: [['JlQ(".mg-mainmenu > li:eq(1) span, .mg-mainmenu > li:eq(1) ul > li:gt(3):lt(5) a")', {suffix: '-yellow-rounded'}]],
				forceMode: 'Edit',
				code: 'if (MGD.elIsSelected) MGP.toggleElementSelection()'
			},
			undoRedo: {
				required: 'transformations',
				blinkSel: [['JlQ(".mg-mainmenu > li:eq(2) span, .mg-mainmenu > li:eq(2) ul > li:eq(0) > a, .mg-mainmenu a[item=transform-chain]")', {suffix: '-yellow-rounded'}]]
			},
			historyPanel: {
				panel: '.mg-panel-transform-chain',
				height: 324,
				required: 'transformations',
				position: 'vertical',
				blinkSel: [
					['JlQ("#mg-undo-transform")', {rEval : true}],
					['JlQ("#mg-edit-transform")', {suffix: '-yellow', rEval : true}]
				],
				code: 'if (!JlQ(".mg-panel-transform-chain:visible").length) JlQ(".mg-mainmenu a[item=transform-chain]").click();'
			},
			domtree: {
				panel: '#mg-domtree',
				forceMode: 'Edit',
				height: 198,
				position: 'vertical',
				code: 'JlQ("#mg-domtree > div").tabs("select", 0); if (JlQ(".mg-panel-transform-chain:visible").length) JlQ(".mg-mainmenu a[item=transform-chain]").click();if (JlQ(".mg-panel-editarea:visible").length) JlQ("#mg-editarea-cancel").click();'
			},
			cssRules: {
				panel: '#mg-domtree',
				forceMode: 'Edit',
				width: 570,
				height: 370,
				position: 'vertical',
				code: 'JlQ("#mg-domtree > div").tabs("select", 1);'
			},
			add: {
				panel: '.mg-panel-addelement',
				forceMode: 'Add',
				offX: 10,
				blinkSel: [
					'JlQ("#mg-main-action .mg-button[mode=Add]")',
					['JlQ("#mg-cursor-handler")', {suffix: '-yellow', rEval : true}]
				]
			},
			add2: {
				panel: '.mg-panel-addelement',
				forceMode: 'Add',
				offX: 10,
				blinkSel: [
					'JlQ("#mg-edit-elem")',
					'JlQ("#mg-qp-position").parent()',
					['JlQ(".mg-newel-more").first()', {suffix: '-yellow'}]
				],
				code: 'MGTut.showSubpanel(3);'
			},
			add3: {
				panel: '.mg-panel-addelement',
				forceMode: 'Add',
				offX: 10,
				blinkSel: [
					['JlQ("#mg-add-table")', {suffix: '-quick-prop'}],
					['JlQ(".mg-panel-properties .mg-subpanel-group[mgorder=7] .mg-changeable-prop").slice(4, 7)', {rEval : true, suffix: '-yellow'}]
				],
				code: 'JlQ("#mg-add-table").click(function (ev) {MGTut.showSubpanel(7); JlQ(this).unbind("click", ev.handler);});'
			},
			transMgmt: {
			},
			save: {
				required: 'transformations',
				edition: 'ext',
				blinkSel: [
					['JlQ(".mg-mainmenu > li:eq(0) span, .mg-mainmenu a[item=saveas]")', {suffix: '-yellow-rounded'}],
					['JlQ("#mg-file-save")', {suffix: '-quick-prop', rEval : true}]
				]
			},
			restore: {
				required: 'transformations',
				blinkSel: [
					['JlQ(".mg-mainmenu > li:eq(1) span, .mg-mainmenu a[item=new]")', {suffix: '-yellow-rounded'}]
				]
			},
			load: {
				edition: 'ext',
				blinkSel: [
					['JlQ(".mg-mainmenu > li:eq(0) span, .mg-mainmenu a[item=open]")', {suffix: '-yellow-rounded'}],
					['JlQ("#mg-file-open")', {suffix: '-quick-prop', rEval : true}]
				]
			},
			'export': {
				required: 'transformations',
				edition: 'ext',
				blinkSel: [
					['JlQ(".mg-mainmenu > li:eq(0) span, .mg-mainmenu a[item=export]")', {suffix: '-yellow-rounded'}]
				],
				code: 'JlQ(".mg-panel-export").cssImportant("z-index", "3100000");'
			},
			'import': {
				edition: 'ext',
				blinkSel: [
					['JlQ(".mg-mainmenu > li:eq(0) span, .mg-mainmenu a[item=import]")', {suffix: '-yellow-rounded'}]
				],
				code: 'JlQ(".mg-panel-import").cssImportant("z-index", "3100001");if (JlQ(".mg-panel-export:visible").length) JlQ(".mg-panel-export .mg-generic-cancel").click();if (JlQ(".mg-panel-editarea:visible").length) JlQ("#mg-editarea-cancel").click();'
			},
			embed: {
				edition: 'extonly',
				width: 485,
				blinkSel: [
					['JlQ(".mg-mainmenu > li:eq(0) span, .mg-mainmenu a[item=embed]")', {suffix: '-yellow-rounded'}],
					['JlQ("#mg-file-embed")', {suffix: '-quick-prop', rEval : true}]
				],
				code: 'if (JlQ(".mg-panel-import:visible").length) JlQ(".mg-panel-import .mg-generic-cancel").click();if (JlQ(".mg-panel-editarea:visible").length) JlQ("#mg-editarea-cancel").click();'
			},
			publish: {
				edition: 'pro',
				blinkSel: [
					['JlQ(".mg-mainmenu > li:eq(0) span, .mg-mainmenu a[item=publish]")', {suffix: '-yellow-rounded'}],
					['JlQ("#mg-file-publish")', {suffix: '-quick-prop', rEval : true}]
				],
				code: 'if (JlQ(".mg-panel-import:visible").length) JlQ(".mg-panel-import .mg-generic-cancel").click();if (JlQ(".mg-panel-editarea:visible").length) JlQ("#mg-editarea-cancel").click();'
			},
			finish: {
				code: 'if (JlQ("#mg-file-publish:visible").length) JlQ(".mg-panel-filemanage .mg-generic-cancel").click();'
			}
		},
		curStage,
		blinker = [],
		arrowWidth = 24,

			
		setCurStep = function (step) {

			var cs = JlQ.inArray(step, seqInd);
			
			if (cs != -1) {
				curStep = step;
				curStepInd = cs;
			}
		},
		
		tryToShowBgStep = function () {
			
			if (JlQ(".mg-panel-jpicker:visible").length) {
				clearInterval(genInterval);
				genInterval = null;
				that.showStep("colorPicker");
			}
		},

		openColorStep = function () {

			 genInterval = setInterval(tryToShowBgStep, 300); 
			 JlQ("#mg-qp-background-color").unbind('click', openColorStep);
		},

		resizeTut = function (ev, ui) {

			var width = ui ? ui.element.width() : JlQ('.mg-welcome').width();

			JlQ('.mg-tut-buttons').width(width - 35);
			JlQ('.mg-dialogue-text').css('margin-bottom', (JlQ('.mg-tut-buttons').height() + 30) + 'px');
		},

		openClosed = function (addTopArrow, dontCorrect) {

			var $parent = JlQ(this).parent(),
				scrollTop = JlQ(document).scrollTop(),
				scrollLeft = JlQ(document).scrollLeft(),
				$tgPanel, appClass, pTop, pLeft, pHeight, tgTop, tgLeft, tgRight, tgHeight, distAvail, newWidth;

			$parent.cssImportant('overflow', 'visible');

			if (dontCorrect !== true) MGDial.openFloat($parent);

			JlQ('.mg-welcome-arrow').remove();

			if (curStage.panel) {
				$tgPanel = JlQ(curStage.panel);
				pTop = parseInt($parent.css('top'));
				pLeft =  parseInt($parent.css('left'));
				tgTop = $tgPanel.offset().top - scrollTop;
				tgLeft = $tgPanel.offset().left - scrollLeft;
				tgHeight = $tgPanel.height();
				if ($tgPanel.is(':visible')) {
					pHeight = $parent.height();
					if (tgTop > pTop + pHeight) {
						appClass = 'mg-welcome-arrow-bottom';
						$parent.css('top', (tgTop - pHeight - 20) + 'px');
					}
					else if (tgTop + tgHeight < pTop) {
						appClass = 'mg-welcome-arrow-top';
					}
					else {
						appClass = 'mg-welcome-arrow-hor';
						if (tgLeft > pLeft) {
							appClass += ' mg-welcome-arrow-right';
							if ($parent.width() + arrowWidth > tgLeft) {
								tgRight = tgLeft + $tgPanel.width();
								distAvail = JlQ(window).width() - tgRight;
								if (tgLeft < distAvail) {
									newWidth = distAvail -30;
									$parent.css({left: (tgRight +arrowWidth) + 'px', width: newWidth + 'px'});
									openClosed.call(this, addTopArrow, true);
									return;
								}
								else {
									newWidth = tgLeft - arrowWidth;
									$parent.width(newWidth);
								}
							}
						}
						else {
							appClass += ' mg-welcome-arrow-left';
						}
						addTopArrow = (tgTop > pTop + 35) ? (tgTop - pTop - 35) : 0;
					}
					if (typeof(addTopArrow) == 'number') appClass += '" style="top:' + (addTopArrow + 40) + 'px;';
					$parent.append('<div class="mg-welcome-arrow ' + appClass +'"></div>');
				}
			}
			setTimeout(resizeTut, 100);

			MGP.fixPosFix($parent);
		},

		blinkerDestroyAll = function () {

			var b;

			while (b = blinker.shift()) {
				b.blinkAreaDestroy();
			}
		},

		showIndex = function () {

			var $diag = JlQ('#mg-dialog');

			$diag.dialog('option', 'close', function () {

				var html = '',
					
					addEl = function (ind, numPref) {

						var m = 0;

						if (typeof(ind) == 'string') {
							html += '<div class="mg-tut-ind-line"><div class="mg-tut-ind-num">' + numPref + '</div><div class="mg-tut-ind-text"><a href="javascript:void(MGTut.showStep(\'' + ind + '\'))">' + MGLang.tutorial[ind].title + '</a></div></div>';
						}
						else {
							html += '<div class="mg-tut-ind-block">';
							JlQ.each(ind, function (i, v) {
								addEl(v, numPref + (typeof(v) == 'string' ? i +1 -m : (i - m++) + '.'));
							});
							html += '</div>';
						}
					};

				addEl(index, '');

				removeArrows();
				JlQ('.mg-tut-buttons').remove();
				JlQ('#mg-dialog .mg-dialogue-text').removeAttr('style').html(html);

				MGDial.dialog({
					title: 'Index',
					dialogClass: 'mg-nohighlight mg-welcome',
					show: 'fade',
					hide: 'fade',
					modal: false,
					width: 500,
					height: 400,
					zIndex: 3000000
				});
			});

			$diag.dialog('close');
		},
			
		goBack = function () {

			curStepInd--;
			curStep = seqInd[curStepInd];
			that.showStep();
		},
			
		goForward = function () {

			curStepInd++;
			curStep = seqInd[curStepInd];
			that.showStep();
		},

		removeArrows = function () {

			JlQ('.mg-welcome-arrow').remove();
			blinkerDestroyAll();
		};



	that.isOpen = function () {

		return JlQ('.mg-welcome:visible').length > 0;
	};

	that.getReopen = function () {

		if (reopen) {
			reopen = false;
			return that.showStep;
		}
	};

	that.setReopen = function () {

		if (that.isOpen()) reopen = true;
	};

	that.nextStep = function (step) {

		if (that.isOpen() && curStep == step) goForward();
	};

	that.showStep = function (forceStep) {

		if (typeof(forceStep) == 'string' && forceStep) {
			setCurStep(forceStep);
		}
		reopen = false;

		if (!curStep || !seq[curStep]) {
			that.startTutorial();
		}

		var $diag = JlQ('#mg-dialog');

		$diag.dialog('option', 'close', function () {

			curStage = seq[curStep];

			if (!curStage) return;

			var curStageLang = MGLang.tutorial[curStep],
				width = (typeof(curStage.width) != 'undefined') ? curStage.width : 400,
				height = (typeof(curStage.height) != 'undefined') ? curStage.height : 300,
				hasNext = curStepInd < seqInd.length -1,
				hasBack = curStepInd > 0,
				html = curStageLang.body,
				$tgPanel, posObj, pos, left, warning;

			if (!JlQ('#mg-tut-start').length) {
				JlQ('#mg-dialog .mg-dialogue-text').after('<div class="mg-tut-buttons" style="display:none;"><span id="mg-tut-start" class="mg-button mg-button-left"><< <b>Start</b></span><span id="mg-tut-back" class="mg-button mg-button-left">< <b>Back</b></span><span id="mg-tut-next" class="mg-button mg-button-left mg-tut-button-sep"><b>Next</b> ></span><span id="mg-tut-index" class="mg-button mg-button-left"><b>Index</b></span><span id="mg-tut-close" class="mg-button mg-button-left"><b>Close</b></span></div>');
				JlQ('#mg-tut-start').click(function () {that.showStep('start')});
				JlQ('#mg-tut-back').click(goBack);
				JlQ('#mg-tut-next').click(goForward);
				JlQ('#mg-tut-close').click(function () {JlQ('#mg-dialog').dialog('close')});
				JlQ('#mg-tut-index').click(showIndex);
				
				JlQ('.mg-welcome').resizable('option', 'resize', resizeTut);
			}

			JlQ('.mg-tut-buttons').removeAttr('style').show();
			JlQ('#mg-tut-start, #mg-tut-back').toggle(hasBack);
			JlQ('#mg-tut-next').toggle(hasNext);
			JlQ('#mg-tut-back').toggleClass('mg-tut-button-sep', !hasNext);

			blinkerDestroyAll();

			if (curStage.edition) {
				switch (curStage.edition) {
					case 'extonly':
						if (!MGOP.cl) {
							warning = MGLang.infos.welcome_ext_only + MGLang.warnings.ext_only;
						}
						break;
					case 'ext':
						if (!MGOP.cl) {
							warning = MGLang.infos.welcome_pro_ext_only + MGLang.warnings.full_only;
						}
						break;
					case 'pro':
						warning = MGLang.infos.welcome_pro_only + MGLang.warnings.full_only;
						break;
				}


				if (warning) {
					html = '<div class="mg-tut-warning"><div class="mg-info"></div><div class="mg-warning-text">' + warning + '</div></div>' + html;
					curStage.required = null;
					curStage.forceMode = null;
				}
			}

			if (curStage.required) {

				switch (curStage.required) {
					case 'selected':
						if (!MGD.elIsSelected) {
							warning = MGLang.infos.welcome_no_el_selected;
							curStage.forceMode = 'Edit';
						}
						break;
					case 'text':
						if (!MGD.elIsSelected || !MGD.$lastCalled.text().replace(/&nbsp;/g, '').replace(/<!--[\s\S]*?-->/g, '').replace(/\s/g, '').length ) {
							warning = MGLang.infos.welcome_selected_text;
							curStage.forceMode = 'Edit';
						}
						break;
					case 'transformations':
						if (!MGD.currentUndoIndex) {
							warning = MGLang.infos.welcome_empty_trsf;
						}
						break;
				}
				if (warning) {
					html = '<div class="mg-tut-warning"><div class="mg-warning"></div><div class="mg-warning-text">' + warning + MGLang.infos.welcome_check_again + '</div></div>' + html;
				}
			}
			JlQ('#mg-dialog .mg-dialogue-text').removeAttr('style').html(html);

			JlQ('.mg-tut-buttons > span').hover(MGBP.hoverButtons);
			if (curStage.blinkSel) {
				JlQ.each(curStage.blinkSel, function (i, v) {
					if (typeof(v) == 'string') {
						blinker.push(new MGBlinker(v));
					}
					else {
						blinker.push(new MGBlinker(v[0], v[1]));
					}
				});
			}
			if (curStage.forceMode && MGP.currentMode != curStage.forceMode) JlQ("span[mode=" + curStage.forceMode + "]").click();

			if (curStage.code) eval(curStage.code);

			if (typeof(curStage.panel) != 'undefined') {
				$tgPanel = JlQ(curStage.panel);
				if ($tgPanel.is(':visible')) {
					MGP.bringToFront($tgPanel);
					if (curStage.position == 'vertical') {
						posObj = MGUtils.getWindowPosition($tgPanel, {left: arrowWidth, top: 20}, width, height);
					}
					else {
						left = arrowWidth;
						if (curStage.offX) left += curStage.offX;
						posObj = MGUtils.getWindowPosition($tgPanel, {left: left, top: 10}, width);
					}
					pos = [posObj.left, posObj.top];
					if (curStage.offY) pos[1] += curStage.offY;
				}
			}
			MGDial.dialog({
				title: curStageLang.title,
				dialogClass: 'mg-nohighlight mg-welcome',
				show: 'fade',
				hide: 'fade',
				modal: false,
				position: pos,
				width: width,
				minHeight: 210,
				zIndex: 3000000,
				open: openClosed,
				close: removeArrows
			});
		});

		$diag.dialog('close');
	};

	that.showSubpanel = function (orderId) {

		var $container = JlQ("#mg-prop-container"),
			$subPanel = JlQ(".mg-panel-properties .mg-subpanel-group[mgorder=" + orderId + "]");
			$ctmp = JlQ(".JLui-icon-circle-triangle-s", $subPanel); 
		
		if ($ctmp.length) $ctmp.click();

		$container.scrollTop($container.scrollTop() + $subPanel.position().top);
	};

	that.startTutorial = function () {
		
		var l = MGLang.infos,
			txt;

		if (that.isOpen()) return;

		if (curStep) {
			that.showStep(curStep);
			return;
		}

		if (JlQ('#mg-dialog:visible').length) {
			JlQ('#mg-dialog').dialog('close');
		}
		txt = '<p class="mg-welcome-head">'+l.welcome_head+'</p><div class="mg-welcome-body">'+l.welcome_body+'<ul>';
		txt += '<li><a href="javascript:void(MGTut.showStep(\'start\'));">'+l.welcome_next+'</a>: '+l.welcome_next_msg+'</li>';
		txt += '<li><a href="javascript:void(MGTut.showIndex());">'+l.welcome_hint+'</a>: '+l.welcome_hint_msg+'</li>';
		txt += '<li><a href="javascript:void(JlQ(\'#mg-dialog\').dialog(\'close\'));">'+l.welcome_skip+'</a>: '+l.welcome_skip_msg+'</li>';
		txt += '</ul></div>';

		JlQ('#mg-dialog .mg-dialogue-text').html(txt);
		JlQ('#mg-dialog').removeClass('mg-hidden');

		MGDial.dialog({
			title: 'Welcome to Jelliphy',
			dialogClass: 'mg-nohighlight mg-welcome mg-start-tutorial',
			modal: false,
			hide: 'fade',
			width: 545,
			zIndex: 3000000
		});
	};

	that.showAbout = function () {
		
		var src = JlQ('script[src*=mg-panel.],script[src*=jlphCore.]').attr('src'),
			m, s;

		if (src) m = src.match(/\?v=([^&]*)&b=([^&]*)/);
		if (m) {
			s = m[1].split('', 3);
			JlQ('#mg-version').text(s.join('.') + m[1].substr(3));
			JlQ('#mg-build').text(m[2]);
		}
		MGP.bringToFront(JlQ('.mg-panel-about').removeClass('mg-hidden'));
	};

	that.init = function () {
		
		seqInd = JlQ.objKeys(seq);
	};

	that.showIndex = showIndex;
},

MGBlinker = function ($el, opt) {

	opt = opt || {};
	opt.suffix = opt.suffix || '';

	var that = this,
		interval = 500,
		blinkingInt,
		repColor,
		
		getEl = function () {

			if (opt.rEval) { 
				return eval($el); 
			}
			else { 
				return $el; 
			}
		},

		blinkAreaInit = function () {

			blinkingInt = setInterval(function () {
					var $el = getEl(),
						color;
					
					if (opt.color) {
						color = $el.css('background-color');
						if (!repColor) repColor = ((color == opt.color || color && '#' + MGED.getColorProperties(color).hex == opt.color.toLowerCase()) ? 'transparent' : color);
						$el.cssImportant('background-color', color == repColor ? opt.color : repColor);
					}
					else {
						$el.toggleClass('mg-blinked' + opt.suffix);
					}
				}, 
				interval);
		};
				
	that.blinkAreaDestroy = function () {

		if (blinkingInt) {
			getEl().removeClass('mg-blinked' + opt.suffix);
			clearInterval(blinkingInt);
		}
	};

	if (!opt.rEval) $el = eval($el);

	blinkAreaInit();
};